<template>
  <div class="register" :style="windowHeight">
    <div class="inner">
      <div class="logo">
        <img src="../../assets/kt.jpg">
      </div>
      <div class="account-wrapper">
        <input v-model="username" type="text" class="form-l" placeholder="请输入真实姓名">
      </div>
      <div class="program-wrapper">
        <input v-model="projectName" type="text" class="form-l" placeholder="请输入项目名称">
      </div>
      <div class="account-wrapper">
        <input v-model="projectNum" type="text" class="form-l" placeholder="请输入项目编号">
      </div>
      <div class="loginbutton">
        <button @click="onregister">注 册</button>
      </div>
      <div @click="closeRegister" class="registerbutton">   <!--逻辑需要改成立即登陆-->
        <span>返回登陆</span>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {Toast, Dialog} from 'vant';

  export default {
    props: {
      name: ''
    },
    data() {
      return {
        projectName: '',
        projectNum: '',
        username: this.name
      };
    },
    computed: {
      windowHeight() {
        return `height:${window.outerHeight}px`;
      }
    },
    methods: {
      onregister() {
        if (this.username === '' || this.projectName === '' || this.projectNum === '') {
          Toast.fail('不能有空值');
        } else {
          // 发送请求存
          this.$http.post(
            'http://192.168.31.96:8080/user/register',
            {
              username: this.username,
              projectName: this.projectName,
              projectNum: this.projectNum
            },
            {emulateJSON: true}
          ).then((response) => {
            response = response.bodyText;
            if (response === 'ok') {
              Toast.success('注册成功！');
              // 需要关掉注册页面，并且传回信息给登陆页面
              this.$emit('closeregister', this.username);
            } else if (response === 'namerepeat') {
              // 表示用户名重复
              Dialog.confirm({
                title: '提示',
                message: '用户名已存在，是否跳转登陆页面？'
              }).then(() => {
                this.$emit('closeregister', this.username);
              }).catch(() => {
                // on cancel
              });
            }
          });
        }
      },
      closeRegister() {
        this.$emit('closeregister', this.username);
      }
    }
  };
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
  .register
    position absolute
    left 0
    top 0
    width 100%
    z-index 1100
    background-color #fff !important
    .inner
      width 100%
      text-align center
      margin 50px auto 0 auto
      .logo
        margin-bottom 30px
      input.form-l
        margin-bottom 20px
        border 1px solid #ddd
        font-size 15px
        padding 10px 10px 10px 20px
        width 80%
        height 15%
        border-radius 50px
        outline none
      .loginbutton button
        width 80%
        height 35px
        border none
        outline none
        border-radius 50px
        padding 20px auto !important
        margin-top 10px
      .registerbutton
        margin-top 50px
</style>
